<template>
	<view>
		<unicloud-db class="music-detail" ref="detailMusic" v-slot:default="{data, loading, error, options}" collection="my-music"
			:where="deatailWhere" getone="true" loadtime="manual"
			field="_id as id,category_id,title,music_src,author,poster,last_modify_date">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">Loading</view>
			<view v-else-if="data">
				<view  class="music-detail-box">
					<image :src="data.poster||'../../static/imgs/poster-basic4.png'" mode=""
						style="width: 12rem;height: 12rem;" @click="playOne(data)"></image>
					<view class="">{{data.title}}</view>
					<view class="fontsize-small fontcolor-secondary">{{data.author}}</view>
					<view class="fontsize-small fontcolor-secondary">发行时间：
						<uni-dateformat format="yyyy-MM-dd" :date="data.last_modify_date" />
					</view>
				</view>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		name:"my-music-detail",
		props:{
			detailId:String
		},
		data() {
			return {
				deatailWhere: '',
			};
		},
		mounted() {
			this.loadData()
		},
		methods:{
			loadData(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
				this.deatailWhere = "_id == '" + this.detailId + "'"
				// 延时加载数据，不然VUE3出错
				if (this.deatailWhere) {
					setTimeout(() => {
						this.$refs.detailMusic.loadData()
					}, 300)
				}
			},
			playOne(item){
					this.$emit('playOne', item)
			}
		}
	}
</script>

<style>
.music-detail{
	display: flex;
	justify-content: center;
}
.music-detail-box{
	display: flex;
	flex-direction: column;
}
</style>
